<template>
  <div class="table">
    <router-link to="/table">
      <el-button>表格</el-button>
    </router-link>
    <router-link to="/advancedFilter">
      <el-button>高级搜索</el-button>
    </router-link>
    <router-link to="/forms">
      <el-button>Forms</el-button>
    </router-link>
    <router-link to="/conditions">
      <el-button>Conditions</el-button>
    </router-link>
    <router-link to="/groups">
      <el-button>Groups</el-button>
    </router-link>
    <router-link to="/filter">
      <el-button>Filter</el-button>
    </router-link>
    <table>
      <thead>
      <tr>
        <th>分公司</th>
        <th>NPS值</th>
        <th>分公司贬损者数量</th>
        <th>分公司总经理罚金</th>
        <th>分公司市场主管罚金</th>
        <th>分部</th>
        <th>分部贬损者数量</th>
        <th>分部经理罚金</th>
        <th>店铺</th>
        <th>店铺贬损者数量</th>
        <th>销售代表罚金</th>
        <th>合计罚金</th>
      </tr>
      </thead>
      <tbody v-html="createTableBody()">
      <tr>
        <th>分公司</th>
        <th>NPS值</th>
        <th>分公司贬损者数量</th>
        <th>分公司总经理罚金</th>
        <th>分公司市场主管罚金</th>
        <th>分部</th>
        <th>分部贬损者数量</th>
        <th>分部经理罚金</th>
        <th>店铺</th>
        <th>店铺贬损者数量</th>
        <th>销售代表罚金</th>
        <th>合计罚金</th>
      </tr>
      </tbody>
    </table>
  </div>
</template>

<script>


  import response from '@/mock/data'
  export default {
    data() {
      return {
        tesla: 214
      }
    },
    computed: {
      branchCompanies() {
        return response.data1.data.monthlyPunishmentStatisticsDtos['0'] || []
      }
    },
    methods: {
      createTableBody() {
        const fields = [
          'branchCompany',
          'npsValue',
          'branchCompanyDetractorsNum',
          'branchCompanyManagerForfeit',
          'branchCompanyMarketerForfeit',
          'monthlyPunishmentDepartmentModels',
          'totalForfeit'
        ]
        const result = this.branchCompanies.map(item => {
          const departments = item.monthlyPunishmentDepartmentModels || []
          const shopsNumList = departments.map(department => (department.monthlyPunishmentShopModels || []).length)
          const rowspan = shopsNumList.reduce((acc, item) => acc + item, 0)
          let departmentRows = this.createDepartment(departments)
          const columns = fields.map(field => {
            if(field === 'monthlyPunishmentDepartmentModels') {
              return departmentRows.shift()
            }
            return `<td rowspan="${rowspan}">${item[field]}</td>`
          }).join('')
          const row = `<tr>${columns}</tr>` + departmentRows.join('')
          return row
        })
        return result.join('')
      },
      createDepartment(data) {
        const fields = ['branchDepartment', 'branchDepartmentDetractorsNum', 'branchDepartmentManagerForfeit']
        let firstRow = []
        const rows = data.map((item, index) => {
          const shops = item.monthlyPunishmentShopModels || [];
          const rowspan = shops.length;
          let shopRows = this.createShop(shops)
          const columns = fields.map(field => `<td rowspan="${rowspan}">${item[field]}</td>`).join('') + shopRows.shift()
          if (index === 0) {
            firstRow = shopRows
            return columns
          }
          return `<tr>${columns}</tr>` + shopRows.join('')
        })
        const result = [rows.shift()].concat(firstRow.concat(rows).join(''))
        return result
      },
      createShop(data) {
        const fields = ['shopName', 'shopDetractorsNum', 'saleRepForfeit']
        let rows = data.map((item, index) => {
          const columns = fields.map(field => `<td>${item[field]}</td>`).join('')
          return index === 0 ? columns : `<tr>${columns}</tr>`
        });
        const result = [rows.shift()].concat(rows.join(''))
        return result
      }
    },

  }
</script>

<style lang="scss" scoped>

  .table /deep/ {
    table {
      table-layout: fixed;
      width: 100%;
      border-collapse: collapse;
    }

    th, td {
      border: 1px solid #999;
      padding: 10px;
      text-align: center;
    }
    h1{
      text-align: center;
    }
  }
</style>
